<template>
    <div 
        style="position: relative;min-height: 20px;"
        :style="{
        'background': nodeModel.configDict.componentStyle.background,
        'marginTop': nodeModel.configDict.componentStyle.marginTop/2+'px',
        'marginBottom': nodeModel.configDict.componentStyle.marginBottom/2+'px',
        'marginLeft': nodeModel.configDict.componentStyle.marginLeft/2+'px',
        'marginRight': nodeModel.configDict.componentStyle.marginLeft/2+'px',
        'paddingTop': nodeModel.configDict.componentStyle.paddingTop/2+'px',
        'paddingBottom': nodeModel.configDict.componentStyle.paddingBottom/2+'px',
        'paddingLeft': nodeModel.configDict.componentStyle.paddingLeft/2+'px',
        }">
        
        <div>
            <el-carousel :height="nodeModel.configDict.componentStyle.heightForCover1/2+'px'" arrow="never" :interval="parseInt(nodeModel.configDict.componentStyle.duration)">
                <el-carousel-item v-for="(item, index) in nodeModel.configDict.itemList" :key="index">
                    <el-image :src="item.coverUrl" fit="cover"
                    :style="{
                        'width': nodeModel.configDict.componentStyle.widthForCover1/2+'px',
                        'height': nodeModel.configDict.componentStyle.heightForCover1/2+'px',
                        'borderRadius': nodeModel.configDict.componentStyle.borderRadiusForCover1/2+'px',
                    }"></el-image>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script>
  export default {
    components: {
        
    },
    props:{
        nodeModel:{
            type: Object,
            default: res=>{}
        },
    },
    data() {
      return {
        
      }
    },
    methods:{
        
    }
  }
</script>

<style lang="scss" scoped>

</style>